<template>
	<tn-popup v-model="show" mode="bottom" :closeBtn="true" @close="closeShow" :borderRadius="20">
		<view class="content">
			<view class="popup_title">选择分类</view>
		</view>
		<view>
		<scroll-view scroll-y="true" style="height: 60vh;">
			<view class="sidebar-container">
				<view class="sidebar">
				  <view class="sidebar-menu">
					<view v-for="(item, index) in sidebarItems" :key="index" :class="{'hover_sidebar_item': hoverIndex === index, 'sidebar-item': true}" @click="handleSidebarItemClick(item, index)">
					  {{ item.title }}
					</view>
				  </view>
				</view>
				<view class="main-content">
					<view class="topics_list" v-for="(topicItem, topicIndex) in topicsList" :key="topicItem.id" @click="handleList(topicItem.id)">
						<span class="topics_title">{{ topicItem.name }}</span>
						<view class="float_right margin_top">
							<u-radio-group v-model="radio" placement="column" activeColor="#FE0000">
								<u-radio :name="topicItem.id"></u-radio>
							</u-radio-group>
						</view>
					</view>
				</view>
			  </view>
		</scroll-view>
		</view>
	</tn-popup>
</template>

<script>
export default {
	props: {
		isShow: {
			type: Boolean
		},
	},
	watch: {
		isShow(newData, oldData) {
			this.show = newData
		}
	},
	data() {
		return {
			show: false,
			hoverIndex: 0,
			radio: null,
			sidebarItems: [
				{ title: '每日上新' },
				{ title: '最新活动' },
				{ title: '福利专区' },
				{ title: '生活体验' }
			],
			topicsList: [
				{ id: 0, name: '买家秀' },
				{ id: 1, name: '网星有品' },
				{ id: 2, name: '每日素材' },
				{ id: 3, name: '网星课堂' },
			]
		}
	},
	methods: {
		closeShow() {
			this.$emit('close')
		},
		handleSidebarItemClick(item, index) {
			this.hoverIndex = index
			// 处理侧边栏菜单项点击事件
			console.log('点击了菜单项:' + item.title);
		},
		handleList(id) {
			this.radio = id
		}
	}
}
</script>

<style scoped>
.popup_title {
	color: #1A1A1A;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 17px;
}
.recently_box {
	padding: 0 10px;
}
.content {
	background-color: #F4F4F4;
}
.sidebar-container {
  display: flex;
  border-top: 1px solid #FFFFFF;
}
.sidebar {
  background-color: #EEEEEE;
  width: 100px;
}
.sidebar-item {
  /* padding: 10px; */
  height: 46px;
  line-height: 46px;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
  font-size: 14px;
  color: #1A1A1A;
}
.hover_sidebar_item {
	background-color: #FFFFFF;
	color: #FE0000;
	font-weight: bold ;
}
.sidebar-item:hover {
  background-color: #FFFFFF;
  color: #FE0000;
  font-weight: bold ;
}
.main-content {
  flex: 1;
}
.topics_list {
	width: 100%;
	height: 46px;
	background-color: #FFFFFF;
	color: #1A1A1A;
	font-size: 14px;
	line-height: 46px;
}
.topics_title {
	padding-left: 16px;
}
.float_right {
	float: right;
}
.margin_top {
	margin-top: 14px;
}
.participateIn_margin {
	margin-right: 10px;
	color: #808080;
	font-size: 12px;
}
</style>
